<style>
    .alert-info {
        background-color: #d9edf7 !important;
        border-color: #bce8f1 !important;
        color: #31708f !important;
    }
</style>
<div ng-controller="addAds">
<div class="modal fade" id="addNewAdImg">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">添加图片信息</h4>
            </div>
            <div class="modal-body">
                <form role="form" class="form-horizontal" name="addImgForm" ng-submit="processImgForm(addImgForm.$valid)" novalidate>
                    <div class="form-group">
                        <label class="control-label col-sm-2">图片链接</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control input-sm" name="contentlink" ng-pattern="/[a-zA-z]+://[^\s]*/" ng-model="formData.contentItem.link" required/>
                            <label for="inputError" class="control-label text-danger" ng-show="addImgForm.contentlink.$invalid && !addImgForm.contentlink.$pristine"><i class="fa fa-times-circle-o"></i> 请输入正确的链接地址</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">宽(px)</label>
                        <div class="col-sm-2">
                            <input type="text" class="form-control input-sm" name="contentwidth" ng-pattern="/^[1-9]\d*$/" ng-model="formData.contentItem.width" required/>
                            <label for="inputError" class="control-label text-danger" ng-show="addImgForm.contentwidth.$invalid && !addImgForm.contentwidth.$pristine"><i class="fa fa-times-circle-o"></i> 请输入正整数</label>
                        </div>
                        <label class="control-label col-sm-2">高(px)</label>
                        <div class="col-sm-2">
                            <input type="text" class="form-control input-sm" name="contentheight" ng-pattern="/^[1-9]\d*$/" ng-model="formData.contentItem.height" required/>
                            <label for="inputError" class="control-label text-danger" ng-show="addImgForm.contentheight.$invalid && !addImgForm.contentheight.$pristine"><i class="fa fa-times-circle-o"></i> 请输入正整数</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">打开方式</label>
                        <div class="col-sm-3">
                            <select class="form-control" ng-model="formData.contentItem.target" ng-options="x.name as x.value for x in selectTarget" ng-change="changeOption()"></select>
                            <!--<select name="" id="" class="form-control" ng-model="formData.contentItem.target" required>-->
                                <!--<option value="_blank" selected>_blank</option>-->
                                <!--<option value="_self">_self</option>-->
                            <!--</select>-->
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">描述</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control input-sm" name="contentdiscription" ng-minlength="5" ng-maxlength="30" ng-model="formData.contentItem.discription" required/>
                            <label for="inputError" class="control-label text-danger" ng-show="addImgForm.contentdiscription.$invalid && !addImgForm.contentdiscription.$pristine"><i class="fa fa-times-circle-o"></i> 5-30个非特殊字符</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">上传图片</label>
                        <div class="col-sm-8">
                            <input type="file" name="uploadify" id="uploadAdsImg" />
                            <input type="hidden" class="form-control input-sm" name="contentsimg" id="contentSimg" ng-minlength="5" ng-model="formData.contentItem.sImg" required/>
                            <img src="" alt="" width="120" height="120" class="img-thumbnail" id="myImg">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" ng-disabled="addImgForm.$invalid">添加</button>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>
<div class="row">
    <div class="col-xs-12">
        <div class="box box-default">
            <div class="box-header">
                <div class="alert alert-success alert-dismissable fade in hide" role="alert" id="addSuccess">
                    <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                    <p><i class="icon fa fa-check"></i> <strong>恭喜！</strong>广告添加成功</p>
                </div>
                <p class="myInfoBox bg-warning text-warning"><i class="icon fa fa-warning"></i>
                    修改广告信息，广告类型不可修改
                </p>
            </div>
            <div class="box-body">
                <form role="form" class="form-horizontal" name="myForm" ng-submit="processForm(myForm.$valid)" novalidate>
                    <div class="form-group">
                        <label class="control-label col-sm-3">广告标识</label>
                        <div class="col-sm-2">
                            <input type="text" class="form-control input-sm" name="mkey" ng-pattern="/^[a-zA-Z][a-zA-Z0-9_]{3,14}$/" ng-model="formData.mkey" required/>
                            <label for="inputError" class="control-label text-danger" ng-show="myForm.mkey.$invalid && !myForm.mkey.$pristine"><i class="fa fa-times-circle-o"></i> 4-15个英文字符</label>

                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-3">广告标题</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control input-sm" name="title" ng-minlength="3" ng-maxlength="30" ng-model="formData.title" required/>
                            <label for="inputError" class="control-label text-danger" ng-show="myForm.title.$invalid && !myForm.title.$pristine"><i class="fa fa-times-circle-o"></i> 3-30个非特殊字符</label>

                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-3">显示</label>
                        <div class="radio col-sm-4">
                            <label>
                                <input type="radio" checked class="mini" value="1" name="state" ng-model="formData.state"/>是&nbsp;
                            </label>
                            <label>
                                <input type="radio" class="mini" name="state" value="2" ng-model="formData.state"/>否
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-3">广告类别</label>
                        <div class="col-sm-2">
                            <select name="" id="" class="form-control" ng-model="formData.category" required>
                                <option value="default" selected>默认分类</option>
                                <option value="friendlink">友情链接</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-sm-3">广告内容</label>
                        <div class="col-sm-8">
                            <!-- Custom Tabs -->
                            <div class="nav-tabs-custom">
                                <ul class="nav nav-tabs">
                                    <li class="dropdown">
                                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" >
                                            <span id="adsType">选择广告类别</span> <span class="caret"></span>
                                        </a>
                                        <ul class="dropdown-menu">
                                            <li role="presentation" id="txtAdsType"><a role="menuitem" dropValue="0" tabindex="-1" data-toggle="tab" href="#tab_1">文字</a></li>
                                            <li role="presentation" id="imgAdsType"><a role="menuitem" dropValue="1" tabindex="-1" data-toggle="tab" href="#tab_2">图片</a></li>
                                        </ul>
                                    </li>
                                </ul>
                                <div class="tab-content">
                                    <div class="tab-pane fade in active" id="tab_1">
                                        <div class="form-group">
                                            <label class="control-label col-sm-2">文字内容</label>
                                            <div class="col-sm-4">
                                                <input type="text" class="form-control input-sm" name="contenttitle"  ng-model="formData.content.title" />
                                                <label for="inputError" class="control-label text-danger" ng-show="myForm.contenttitle.$invalid && !myForm.contenttitle.$pristine"><i class="fa fa-times-circle-o"></i> 5-30个非特殊字符</label>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-sm-2">文字链接</label>
                                            <div class="col-sm-4">
                                                <input type="text" class="form-control input-sm" name="contentlink"  ng-model="formData.content.link" />
                                                <label for="inputError" class="control-label text-danger" ng-show="myForm.contentlink.$invalid && !myForm.contentlink.$pristine"><i class="fa fa-times-circle-o"></i> 5-30个非特殊字符</label>
                                            </div>
                                        </div>
                                    </div><!-- /.tab-pane -->
                                    <div class="tab-pane fade" id="tab_2">
                                        <div class="form-group">
                                            <!--<label class="control-label col-sm-3">添加图片</label>-->
                                            <div class="col-sm-4">
                                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addNewAdImg">添加图片</button>
                                            </div>
                                        </div>
                                        <div class="box box-primary">
                                            <div class="box-header with-border">
                                                <h3 class="box-title">图片列表</h3>
                                                <span class="label label-primary pull-right"><i class="fa fa-fw fa-picture-o"></i></span>
                                            </div><!-- /.box-header -->
                                            <div class="box-body">
                                                <p class="text-warning"><i class="fa fa-fw fa-info-circle"></i>点击上传添加广告图片，单张图默认不轮播，多图为轮播显示。最多4张图</p>
                                                <div id="imgInfolist">

                                                </div>
                                            </div><!-- /.box-body -->
                                        </div>
                                    </div><!-- /.tab-pane -->
                                </div><!-- /.tab-content -->
                            </div><!-- nav-tabs-custom -->
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" ng-disabled="myForm.$invalid">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</div>
<script>

            doraApp.controller("addAds",function($scope,$http){
                $scope.formData = {};
                $scope.formData.type = "0";
                $scope.formData.content = {};
                $scope.formData.content.link = "http://www.doramart.com";
                $scope.formData.content.title = "默认链接标题";
                $scope.formData.contentItem = {};

                $scope.selectTarget = [
                    {name:'_blank',value : '_blank'},
                    {name:'_self',value : '_self'}
                ];

                $scope.formData.contentItem.target = '_blank';
                var contentArray = [];
                var editArrImg = [];
//                初始化上传按钮
                initUploadFyBtn('uploadAdsImg','',function(data){
//                    alert('上传成功');
                    $("#myImg").attr("src",data);
                    $scope.formData.contentItem.sImg = data;
                });

//                广告类型选项卡切换
                $('a[data-toggle="tab"]').on("show.bs.tab",function(e){
                    var txt = $(this).text();
                    $("#adsType").text(txt);
                    $scope.formData.type = $(this).attr("dropValue");
                });
//                添加图片信息窗口
                $('#addNewAdImg').on('show.bs.modal', function (event) {
                    $scope.formData.contentItem = {}

                }).on('hidden.bs.modal', function (e) {

                });

                $scope.targetID = window.location.href.split("/")[7];
                if($scope.targetID){

                    $http.get("/admin/manage/<%=bigCategory%>/item?uid="+$scope.targetID).success(function(result){
                        $scope.formData = result;

                        if(result.type === "0"){ //文字广告
                            $("#adsType").text("文字");
                            $("#tab_2").removeClass("in active");
                            $("#tab_1").addClass("in active");
                            $("#imgAdsType").addClass("hide");
                            $scope.formData.content = JSON.parse(result.content);

                        }else{
                            $("#adsType").text("图片");
                            $("#tab_1").removeClass("in active");
                            $("#tab_2").addClass("in active");
                            $("#txtAdsType").addClass("hide");

                            var imgInfos = $scope.formData.content;
                            editArrImg = imgInfos.replace(/},/g,"};").split(";");
                            contentArray = editArrImg;
                            for(var i=0;i<editArrImg.length;i++){
                                var item = JSON.parse(editArrImg[i]);
                                var newItem = getImgInfo(item.sImg,item.link,item.width,item.height,item.target,item.discription);
                                $("#imgInfolist").append(newItem);
                                //                    添加关闭按钮的监听事件
                                initCloseBtn($scope,contentArray);
                            }
                        }

                    })
                }


                $scope.processImgForm = function(isValid){
                    contentArray.push(JSON.stringify($scope.formData.contentItem));
                    $("#addNewAdImg").modal("hide");
                    $scope.formData.content = contentArray.join();
//                    获取demo下元素个数
                    var demoLength = $('#imgInfolist').children('.alert').length;
//                    在demo树下添加元素
                    var newItem = getImgInfo($scope.formData.contentItem.sImg,$scope.formData.contentItem.link,$scope.formData.contentItem.width,$scope.formData.contentItem.height,$scope.formData.contentItem.target,$scope.formData.contentItem.discription);
                    $("#imgInfolist").append(newItem);
//                    添加关闭按钮的监听事件
                    initCloseBtn($scope,contentArray);
                };

                // 添加或修改广告

                $scope.processForm = function(isValid){

                    var currentContent = $scope.formData.content;
                    if($scope.formData.type === "0"){
                        currentContent = JSON.stringify($scope.formData.content);
                    }
                    var groupData = {
                        mkey : $scope.formData.mkey,
                        title : $scope.formData.title,
                        category : $scope.formData.category,
                        type : $scope.formData.type,
                        content : currentContent,
                        state : $scope.formData.state
                    };

                    angularHttp($http,isValid,'POST',getTargetPostUrl($scope,'<%=bigCategory%>'),groupData,function(data){
                        window.location = "/admin/manage/adsList";
                    });

                }
            });


        //初始化关闭按钮监听
        function initCloseBtn($scope,contentArray){
            $('#imgInfolist > .alert').on('closed.bs.alert', function () {
                // 删除数组中的元素同时删除绑定数据
                for(var m=0;m<contentArray.length;m++){
                    if(JSON.parse(contentArray[m]).sImg === $(this).find("img").attr("src")){
                        contentArray.splice(m,1);
                        $scope.formData.content = contentArray.join();
//                        alert(contentArray.length)
                    }
                }
            })
        }

</script>